<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>标题</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.green {
				background: green;
				height: 2px;
			}
			
			.hides {
				visibility: hidden;
			}
			
			.mui-content .content-input {
				border: none;
				outline: none;
				height: 100%;
				border-radius: 10px;
			}
			
			.search-container {
				margin: 5px auto;
				border: 1px #888 solid;
				background: white;
				height: 40px;
				border-radius: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="closethiss" onclick="closethiss()" class="mui-pull-left flex v-center" style="height: 100%;">关闭</a>
			<h1 id="title" class="mui-title" style="width: 60%;margin: 0px auto; ">loading...</h1>
			<h1 id="title2" class="mui-title" style="display: none;">
				<input id="search-content" type="url" style="color: black;margin-left: 5px;margin-right: 5px;width: 80%;float: left;" />
			</h1>

			<a id="bths" onclick="closesearch()" style="display: none;color: white;" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">取消</a>
			<a id="searchs" onclick="searchs()" style="display: none;" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" style="color: white;">搜索</a>
		</header>
		<div class="mui-content">
			<div id="pro" class="green"></div>

		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>
			mui.init({
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
				}
			});

			document.getElementById("searchs").addEventListener("longtap", function() {
				reloads();
			});
			document.getElementById("search-content").addEventListener('keydown', function() {
				if(event.keyCode == 13) {
					// 收回弹出的软键盘
					document.activeElement.blur();

					searchs();
				}
			}, false);

			function reloads() {
				baiduWV.reload();
			}
			var baiduWV;
			var self;
			mui.back = function() {
				baiduWV.canBack(function(event) {
					var canBack = event.canBack;
					if(canBack) {
						baiduWV.back();
					} else {
						self.close();
					}
				});
			}

			function closethiss() {
				self.close();
			}
			mui.plusReady(function() {

				self = plus.webview.currentWebview();
				var url = self.content;

				baiduWV = plus.webview.create(url, "web", {
					top: "46px",
					bottom: 0,
					scalable: true
				});

				baiduWV.addEventListener('titleUpdate', function() {
					var t = baiduWV.getTitle();
					document.getElementById("title").innerHTML = t;
				});

				baiduWV.addEventListener("progressChanged", function(e) {

					var p = e.progress;
					var pro = document.getElementById("pro");

					pro.style.width = p + "%";
					if(p == 100) {
						document.getElementById("search-content").value = baiduWV.getURL();
						pro.className = "hides";
						closesearch();
					} else {
						pro.className = "green";
					}

				});
				self.append(baiduWV);
			});
			var isshow = false;

			function searchs() {

				if(!isshow) {
					document.getElementById("title").style.display = "none";
					document.getElementById("closethiss").style.display = "none";
					document.getElementById("title2").style.display = "block";
					document.getElementById("bths").style.display = "block";
					isshow = true;
				} else {
					var c = document.getElementById("search-content").value;
					if(CheckUrl(c)) {
						closesearch();
						baiduWV.loadURL(c);
					} else {
						var tmp = "http://www.baidu.com/s?word=";
						var tmp2 = "http://www.baidu.com";
						if(c == undefined || c == null || trim(c).length == 0) {
							baiduWV.loadURL(tmp2);
						} else {
							baiduWV.loadURL(tmp + trim(c));
						}
						//
					}
				}

			}
			//去左右空格;
			function trim(s) {
				return s.replace(/(^\s*)|(\s*$)/g, "");
			}

			function closesearch() {
				isshow = false;
				document.getElementById("title2").style.display = "none";
				document.getElementById("bths").style.display = "none";
				document.getElementById("closethiss").style.display = "";
				document.getElementById("title").style.display = "block";

			}

			function CheckUrl(url) {
				var str = url;
				//判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
				//下面的代码中应用了转义字符"\"输出一个字符"/"
				var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
				var objExp = new RegExp(Expression);
				if(objExp.test(str) == true) {
					return true;
				} else {
					return false;
				}
			}
		</script>
	</body>

</html>